
.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.fz(@px){
	.px2rem(font-size,@px);
}

.banner{
	.px2rem(padding-top,90);
	img{
		width: 100%;
	}
}

.info{
	.px2rem(margin,40);
	.px2rem(padding-bottom,30);
	.px2rem(font-size,26);
	border-bottom: 1px dashed #d5d5d5;
	p{
		text-align: center;
		.px2rem(margin,10);
	}
}

.list{
	.total{
		text-align: center;
		.px2rem(padding,30);
		background: url(../images/totalbg.png) no-repeat center center;
		background-size: 35%;
		.px2rem(font-size,32);
		color: #fe8e44;
	}
	.lists{
		.px2rem(padding-left,30);
		.px2rem(padding-right,30);
		.bookname{
			.px2rem(margin-top,30);
			.px2rem(margin-bottom,40);
			border-bottom: 1px dashed #d5d5d5;
			.top{
				display: flex;
				.left{
					width: 26%;
					display: flex;
					justify-content: center;
					align-items: center;
					img{
						width: 100%;
					}
				}
				.right{
					flex: 1;
					.px2rem(margin-left,30);
					.name{
						.px2rem(font-size,28);
						.px2rem(margin-bottom,10);
						color: #5ab2d1;
					}
					.infos{
						.px2rem(font-size,26);
						.px2rem(line-height,40);
						color: #555555;
					}
				}
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				.px2rem(padding-left,10);
				.px2rem(padding-right,10);
				.px2rem(margin-bottom,20);
				.writer{
					.px2rem(font-size,20);
					.px2rem(margin-top,8);
					color: #555555;
					span{
						border-left: 1px solid #888;
						margin-left: 5px;
						padding-left: 5px;
					}
				}
				.intro{
					.px2rem(padding,10);
					border: 1px solid #5cb3d2;
					border-radius: 4px;
				}
			}
		}
	}
}

.loading{
	text-align: center;
	.px2rem(font-size,26);
	.px2rem(line-height,40);
	color: #555555;
}

.more{
	width: 80%;
	margin: auto;
	.px2rem(margin-top,50);
	.px2rem(margin-bottom,50);
	text-align: center;
	.px2rem(padding-top,18);
	.px2rem(padding-bottom,18);
	.px2rem(font-size,30);
	border-radius: 4px;
	background: #fd8f43;
	color: #fff;
}